{extend name="index/base" /}
{block name='title'}Transaction Record{/block}
{block name='content'}

<div class="container clearfix my-5 pb-1">
    {include file="user/leftMenu" name="MY Wallet" route="user/wallet"/}

    <div class="userBox user-wallet">
        <div class="userH_tab clearfix">
            <a href="{:url('/user/wallet')}" >My Wallet</a>
            <a href="{:url('/user/walletlist')}" class="on" >Transaction Record</a>
        </div>
        <div class="user-wallet-content">
            <div class="user-wallet-record">
                <p class="user-wallet-record-money">
                    Available Balance:
                    <span class="bizhong">USD</span>
                    <span class="my_shop_price">{$money_f}{:empty($user_model)?'0.00':$user_model->closeMoney()}</span>&nbsp;&nbsp;
                    Balance Reserved:
                    <span class="bizhong">USD</span>
                    <span class="my_shop_price">{$money_f}{$user_model['money']}</span>
                </p>
                <hgroup>
                    <h5 class="user-wallet-subtitle">
                        <span class="pr15">Transaction Status:</span>
                        <span>
                            <a href="javascript:;"  :class="{'current':listQuery.activeState=='all'} " @click="handleCond('all')">All</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                        </span>
                        <span>
                            <a :class="{'current':listQuery.activeState=='income'} " @click="handleCond('income')" >Income</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                        </span>
                        <span>
                            <a  :class="{'current':listQuery.activeState=='expense'} " @click="handleCond('expense')">Expense</a>
                        </span>
                    </h5>
                    <h6 class="total-tip">Total Transactions</h6>
                </hgroup>
                <table class="userTable tc mt-1" width="100%" cellpadding="0" cellspacing="0">
                    <tbody>
                    <tr>
                        <th width="20%">Date</th>
                        <th width="25%">Transaction Number</th>
                        <th width="10%">Income</th>
                        <th>Detail</th>
                    </tr>
                    <tr v-for="(item,index) in list" :key="index">
                        <td>{{item.create_time}}</td>
                        <td>{{item.customer_no}}</td>
                        <td>{{item.money}}</td>
                        <td>{{item.intro}}</td>
                    </tr>
                    </tbody>
                </table>
                <!-- Pagination-->
                <nav class="d-flex justify-content-center pt-2" aria-label="Page navigation">
                    <el-pagination  background @current-change="handlePageChange" :page-size="listQuery.limit" @size-change="handlePageSizeChange"  layout="  prev, pager, next" :total="total"> </el-pagination>

                </nav>
            </div>

        </div>
    </div>
</div>

{/block}
{block name='script'}

<script>

    layui.extend({
    }).use([], function () {
        initVue({
            data: {
                listQuery:{
                    activeState:'all',
                    limit: 15,
                    page:1,
                },
                list: [],
                total: 0,
                total_page: 0,
            },
            components: {

            },
            computed: {

            },
            created: function () {
            },
            mounted: function () {
                this._initData()
            },
            methods: {
                _initData:function(){
                    const that = this
                    this.$network('user/moneyLogs',this.listQuery).then(function(res){
                        var data = res.data || {}
                        that.total = data.total || 0
                        that.total_page = data.total_page || 0
                        that.list = data.list ||[]

                    })
                },
                handlePageSizeChange:function(limit){
                    this.listQuery.limit = limit
                    this._initData()
                },
                handlePageChange:function(page) {
                    this.listQuery.page = page
                    this._initData()
                },
                handleCond:function(activeState){
                    this.listQuery.activeState = activeState
                    this._initData()
                }
            },
        })


    })

</script>

{/block}